<template>
  <view class="content">
    <view class="content1">
      <view class="lefttitle"> 计算方式 </view>
      <view class="rightselect">
        <text :class="{ select_cal: calStyle == 1 }" @click="onclickCal(1)"
          >按贷款总额</text
        >
        <text :class="{ select_cal: calStyle == 2 }" @click="onclickCal(2)"
          >按房屋总价</text
        >
      </view>
    </view>
    <view class="showselectcal">
      <view class="showselectcal_1" v-if="calStyle == 1">
        <text>贷款金额</text>
        <input type="text" v-model="calnumber" />
        <text>万</text>
      </view>
      <view class="" v-else>
        <view class="showselectcal_2">
          <text>房屋总价</text>
          <input type="text" v-model="totalHousePrice" />
          <text>万</text>
        </view>
        <view class="showselectcal_22">
          <text>首付选择</text>
          <uni-data-select
            @blur="binddata('type', $event.detail.value)"
            class="selectlist"
            placeholder="请选择首付百分比"
            v-model="soufuselect"
            :localdata="localSelection"
          ></uni-data-select>
          <text>(0万)</text>
        </view>
        <view class="showselectcal_2">
          <text>贷款金额</text>
          <input type="text" v-model="calnumber" />
          <text>万</text>
        </view>
      </view>
    </view>
    <view class="content2">
      <view class="lefttitle"> 贷款方式 </view>
      <view class="rightselect">
        <text :class="{ select_cal: loanstyle == 1 }" @click="onclickLoan(1)"
          >组合贷</text
        >
        <text :class="{ select_cal: loanstyle == 2 }" @click="onclickLoan(2)"
          >商业贷</text
        >
        <text :class="{ select_cal: loanstyle == 3 }" @click="onclickLoan(3)"
          >公积金贷</text
        >
      </view>
    </view>
    <view class="showselectloanstyle">
      <!-- 组合贷 -->
      <view class="showselectloan_1" v-show="loanstyle == 1">
        <view class="gjjamount">
          <text>公积金金额</text>
          <input type="text" v-model="providentfundAmount" />
          <text>万</text>
        </view>
        <view class="gjjyears">
          <text>公积金年限</text>
          <text @click="clickGjjyears('providentfundyears')"
            >{{ providentfundyears }}年</text
          >
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view class="gjjinterestrate">
          <text>公积金利率</text>
          <text @click="clickGjjinterestrate('providentfundrate')">{{
            providentfundrate
          }}</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view class="sdamount">
          <text>商贷金额</text>
          <input type="text" v-model="commercialloanAmount" />
          <text>万</text>
        </view>
      </view>
      <!-- 商业贷 -->
      <view class="showselectloan_2" v-show="loanstyle == 1 || loanstyle == 2">
        <view class="commercial">
          <text>商贷年限</text>
          <text @click="clickCommercial('CommercialLoanTerm')"
            >{{ CommercialLoanTerm }}年</text
          >
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view class="interestrate">
          <text>利率方式</text>
          <text @click="clickInterestrate('Interestratemethod')">{{
            Interestratemethod
          }}</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view class="commercialrate">
          <text>商贷利率</text>
          <text @click="clickCommercialrate('Commercialrate')">{{
            Commercialrate
          }}</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <!-- 公积金贷 -->
      <view class="showselectloan_3" v-show="loanstyle == 3">
        <view class="gjjyears">
          <text>公积金年限</text>
          <text @click="clickGjjyears('providentfundyears')"
            >{{ providentfundyears }}年</text
          >
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <view class="gjjinterestrate">
          <text>公积金利率</text>
          <text @click="clickGjjinterestrate('providentfundrate')">{{
            providentfundrate
          }}</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 底部开始计算按钮 -->
    <view class="startcount">
      <button class="coutbtn">开始计算</button>
    </view>
    <!-- 弹窗组件 -->
    <uni-popup
      class="popupcontent"
      ref="popup"
      type="bottom"
      background-color="#fff"
      @change="changepop"
    >
      <view class="popup-content" v-if="isShowPicker">
        <view class="select-content">
          <picker-view
            :value="value"
            :indicator-style="'height: 50px;'"
            @change="bindChange"
            :immediate-change="true"
            class="picker-view"
          >
            <picker-view-column>
              <view
                class="item"
                v-for="(item, index) in optionArr"
                :key="index"
                >{{ isyear ? item + 1 + "年" : item }}</view
              >
            </picker-view-column>
          </picker-view>
        </view>
        <view class="btn-content">
          <button type="default" class="cancel" @click="clickcancel">
            取消
          </button>
          <button type="primary" class="ok" @click="clickok">确定</button>
        </view>
      </view>
    </uni-popup>
    <!-- /弹窗组件 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      calStyle: 1, //默认计算方式
      loanstyle: 2, //默认贷款方式
      totalHousePrice: 0, //房屋总价
      soufuselect: "", //首付选择
      calnumber: 0, //贷款金额
      providentfundAmount: "", //公积金金额
      providentfundyears: 30, //公积金年限
      providentfundrate: "使用最新LPR", //公积金利率
      commercialloanAmount: "", //商贷金额
      CommercialLoanTerm: 30, //商贷年限
      Interestratemethod: "使用最新LPR", //利率方式
      Commercialrate: "使用最新LPR", //商贷利率
      optionArr: 30, //选择弹框的数据
      isyear: false, //是否显示年
      value: [9999], //打开选择弹框默认选择值，超出为最后的一个值
      curselect: "", //当前是点击哪一个触发的
      result: "", //当前选择值
      isShowPicker: false,
      localSelection: [
        { value: "30%", text: "30%" },
        { value: "35%", text: "35%" },
        { value: "40%", text: "40%" },
        { value: "45%", text: "45%" },
        { value: "50%", text: "50%" },
        { value: "55%", text: "55%" },
        { value: "60%", text: "60%" },
        { value: "65%", text: "65%" },
        { value: "70%", text: "70%" },
        { value: "75%", text: "75%" },
        { value: "80%", text: "80%" },
        { value: "85%", text: "85%" },
        { value: "90%", text: "90%" },
        { value: "95%", text: "95%" },
      ],
    };
  },
  computed: {},
  methods: {
    // 选择计算方式
    onclickCal(val) {
      this.calStyle = val;
    },
    // 选择贷款方式
    onclickLoan(val) {
      this.loanstyle = val;
    },
    // 点击公积金年限
    clickGjjyears(selectval) {
      this.optionArr = 30;
      this.isyear = true;
      this.value = [];
      this.value.push(this[selectval] - 1);
      console.log(this.value, this[selectval] - 1);
      this.$refs.popup.open("bottom");
      this.curselect = selectval;
    },
    // 点击公积金利率
    clickGjjinterestrate(selectval) {
      this.optionArr = ["使用最新LPR", "使用旧版基准利率"];
      this.isyear = false;
      this.value = [];
      this.value.push(this.optionArr.indexOf(this[selectval]));
      console.log(this.value);
      this.$refs.popup.open("bottom");
      this.curselect = selectval;
    },
    // 点击商贷年限
    clickCommercial(selectval) {
      this.optionArr = 30;
      this.isyear = true;
      this.value = [];
      this.value.push(this[selectval] - 1);
      console.log(this.value, this[selectval] - 1);
      this.$refs.popup.open("bottom");
      this.curselect = selectval;
    },
    // 点击利率方式
    clickInterestrate(selectval) {
      this.optionArr = ["使用最新LPR", "使用旧版基准利率"];
      this.isyear = false;
      this.value = [];
      this.value.push(this.optionArr.indexOf(this[selectval]));
      console.log(this.value);
      this.$refs.popup.open("bottom");
      this.curselect = selectval;
    },
    // 点击商贷利率
    clickCommercialrate(selectval) {
      this.optionArr = ["使用最新LPR", "使用旧版基准利率"];
      this.isyear = false;
      this.value = [];
      this.value.push(this.optionArr.indexOf(this[selectval]));
      console.log(this.value);
      this.$refs.popup.open("bottom");
      this.curselect = selectval;
    },
    // 点击取消
    clickcancel() {
      this.curselect = "";
      this.result = "";
      this.$refs.popup.close();
    },
    // 点击确定
    clickok() {
      this[this.curselect] = this.result;
      this.$refs.popup.close();
    },
    // 弹窗组件
    changepop(e) {
      this.isShowPicker = e.show;
      console.log("当前模式：" + e.type + ",状态：" + e.show, e);
    },
    // 弹框选择器当前选择的值
    bindChange(e) {
      const val = e.detail.value;
      console.log("当前选择的数组", val);
      this.result = Array.isArray(this.optionArr)
        ? this.optionArr[val[0]]
        : val[0] + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 20rpx 10rpx 0 10rpx;
  color: #000;
  box-sizing: border-box;
  .content1,
  .content2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .lefttitle {
      font-size: 35rpx;
      font-weight: bold;
    }
    .rightselect {
      display: flex;
      font-size: 24rpx;
      text {
        margin-left: 20rpx;
      }
      .select_cal {
        color: #36bdee;
      }
    }
  }
  .showselectcal {
    margin-top: 30rpx;
  }
  .showselectcal_1,
  .showselectcal_2 {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1px solid gainsboro;
  }
  .showselectcal_22 {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid gainsboro;
    .selectlist {
      width: 45%;
      margin: 0 40rpx;
    }
  }
  .content2 {
    margin-top: 40rpx;
  }
  .showselectloanstyle {
    padding-bottom: 200rpx;
    .gjjamount,
    .sdamount {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 1px solid gainsboro;
    }
    .gjjyears,
    .gjjinterestrate,
    .commercial,
    .interestrate,
    .commercialrate {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 1px solid gainsboro;
    }
  }
  .popup-content {
    height: 40vh;
    border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx;
    .picker-view {
      width: 100%;
      height: 270rpx;
      padding-top: 30rpx;
      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }
    .btn-content {
      display: flex;
      justify-content: center;
      margin-top: 75rpx;
      .cancel {
        width: 215rpx;
        height: 85rpx;
        line-height: 85rpx;
        margin: 0;
        color: #000000;
        margin-right: 20rpx;
      }
      .ok {
        width: 215rpx;
        height: 85rpx;
        line-height: 85rpx;
        margin: 0;
        color: #ffffff;
        margin-left: 20rpx;
      }
    }
  }
  .startcount {
    background: #ffffff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 185rpx;
    display: flex;
    justify-content: center;
    border-top: 1px solid gainsboro;
    .coutbtn {
      color: #ffffff;
      margin-top: 30rpx;
      width: 86%;
      height: 95rpx;
      text-align: center;
      line-height: 95rpx;
      background-color: #36bdee;
    }
  }
}
</style>
